<% content_for(:toolbar) do %>
  <div class="toolbar_buttons">
    <% if can? :create, Alchemy::Picture %>
      <div class="toolbar_button">
        <%= render 'alchemy/admin/uploader/button',
          object: Alchemy::Picture.new,
          file_attribute: 'image_file',
          redirect_url: alchemy.admin_pictures_path(
            size: @size,
            q: { last_upload: true }
          ) %>
      </div>
      <div class="toolbar_spacer"></div>
    <% end %>
    <div class="button_group">
      <sl-tooltip content="<%= Alchemy.t(:small_thumbnails) %>">
        <%= link_to(
          render_icon('zoom-out'),
          alchemy.admin_pictures_path(
            search_filter_params.merge(size: "small").to_h
          ),
          class: "icon_button"
        ) %>
      </sl-tooltip>
      <sl-tooltip content="<%= Alchemy.t(:medium_thumbnails) %>">
        <%= link_to(
          render_icon('search'),
          alchemy.admin_pictures_path(
            search_filter_params.merge(size: "medium").to_h
          ),
          class: "icon_button"
        ) %>
      </sl-tooltip>
      <sl-tooltip content="<%= Alchemy.t(:big_thumbnails) %>">
        <%= link_to(
          render_icon('zoom-in'),
          alchemy.admin_pictures_path(
            search_filter_params.merge(size: "large").to_h
          ),
          class: "icon_button"
        ) %>
      </sl-tooltip>
    </div>
    <div class="toolbar_spacer"></div>
    <div class="toolbar_button">
      <sl-tooltip content="<%= Alchemy.t("Select all") %>">
        <%= link_to(
          render_icon('checkbox-multiple'),
          nil,
          id: 'select_all_pictures',
          class: 'icon_button',
          'data-alchemy-hotkey' => 'alt+a'
        ) %>
      </sl-tooltip>
    </div>
  </div>

  <%= render 'alchemy/admin/partials/search_form',
    additional_params: [:size] %>
<% end %>

<div id="picture_archive" class="resources-table-wrapper with_tag_filter">
  <div class="resources-header">
    <h2>
      <%= @pictures.total_count %>
      <%= Alchemy::Picture.model_name.human(count: @pictures.total_count) %>
    </h2>
    <%= render "alchemy/admin/resources/applied_filters" %>
  </div>
  <%= render 'archive' %>
</div>

<% content_for :javascripts do %>
  <script type="module">
    import ImageOverlay from "alchemy_admin/image_overlay";
    import pictureSelector from "alchemy_admin/picture_selector";
    import { on } from "alchemy_admin/utils/events";

    pictureSelector();
    on("click", "#picture_archive", ".thumbnail_background", (event) => {
      const url = event.target.closest("a")?.href;
      const overlay = new ImageOverlay(url, {
        size: `${window.clientWidth}x${window.clientHeight}`,
        padding: false
      });
      overlay.open();
      event.preventDefault();
    });
  </script>
<% end %>
